<template>
  <div>
    <el-dialog
      :title="dialogTitle"
      width="800px"
      :visible.sync="dialogVisible"
      :before-close="tableClose"
      >
      <el-form 
        label-position="right"
        :model="addInfo"
        label-width="120px"
        ref="formRef"
        inline
        size="mini"
        >
        <el-row>
          <el-col :span="12">
            <el-form-item prop="name" label="产品名称：" > 
              <el-input v-model="editdata.name" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="sku" label="SKU：">
              <el-input v-model="editdata.sku" :disabled="true" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="specification" label="规格：" >
              <el-input 
                placeholder="请输入内容" 
                v-model="editdata.specification" 
                class="input-with-select">
                <el-select 
                  v-model="editdata.unit" 
                  placeholder="单位"
                  slot="append" 
                  style="width: 70px"
                  @change="changeEvent5"
                  >
                  <el-option 
                    v-for="(item) in unitList"
                    :key="item.id"
                    :label="item.type"
                    :value="item.type"
                  ></el-option>
                </el-select>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="count" label="产品数量：">
              <el-input v-model="editdata.count" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="supplierId" label="供应商id："> 
              <el-input v-model="editdata.supplierId" :disabled="true" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="variety" label="所属种类："> 
              <el-select
                v-model="editdata.variety"
                placeholder="请选择"
                @change="changeEvent"
              >
                <el-option
                  v-for="(item) in varietyList"
                  :key="item.id"
                  :label="item.type"
                  :value="item.type"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="type" label="产品类型：" > 
              <el-select
                v-model="editdata.type"
                placeholder="请选择"
                @change="changeEvent1"
              >
                <el-option
                  v-for="(item) in productType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="tagStatus " label="电子标签状态：" >
              <el-select
                v-model="editdata.tagStatus"
                placeholder="请选择"
                @change="changeEvent4"
                :disabled="true"
              >
                <el-option
                  v-for="(item) in tagStatusList"
                  :key="item.id"
                  :label="item.type"
                  :value="item.type"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
        <el-col :span="12">
            <el-form-item prop="inputType " label="投入品类型:" >
              <el-select
                v-model="editdata.inputType"
                placeholder="请选择"
                @change="changeEvent2"
              >
                <el-option
                  v-for="(item) in inputList"
                  :key="item.id"
                  :label="item.type"
                  :value="item.type"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="level " label="产品等级：" >
              <el-select
                v-model="editdata.level"
                placeholder="请选择"
                @change="changeEvent3"
                :disabled="true"
              >
                <el-option
                  v-for="(item) in levelList"
                  :key="item.id"
                  :label="item.type"
                  :value="item.type"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="price" label="单价：" >
              <el-input v-model="editdata.price">
                <el-button slot="append">元</el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="factoryId" label="所属加工厂id：" >
              <el-input v-model="editdata.factoryId" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="bestBeforeDate" label="最佳食用期:" >
                <el-input v-model="editdata.bestBeforeDate">
                  <el-button slot="append" >天</el-button>
                </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="expirationDate " label="保质期:" >
              <el-input v-model="editdata.expirationDate ">
                <el-button slot="append" >月</el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeform()">取 消</el-button>
          <el-button type="primary" @click="editMInfo">{{message}}</el-button>
        </span>

    </el-dialog>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import { editInfo } from '../../../Api/processingplant/process_material'


export default {
  name:'FromInfo',
  inject: ["reload"],
  watch:{
    dialogVisible:function(){
      this.editdata.authentication = this.addInfo.authentication
      this.editdata.bestBeforeDate = this.addInfo.bestBeforeDate
      this.editdata.brand = this.addInfo.brand
      this.editdata.name = this.addInfo.name
      this.editdata.price = this.addInfo.price
      this.editdata.purchaseChannel.id = this.addInfo.purchaseChannel.id
      this.editdata.purchaseChannel.name  = this.addInfo.purchaseChannel.name 
      this.editdata.purchaseChannel.platform  = this.addInfo.purchaseChannel.platform 
      this.editdata.purchaseChannel.url  = this.addInfo.purchaseChannel.url 
      this.editdata.sku = this.addInfo.sku
      this.editdata.count = this.addInfo.count
      this.editdata.expirationDate = this.addInfo.expirationDate
      this.editdata.factoryId = this.addInfo.factoryId
      this.editdata.images = this.addInfo.images
      this.editdata.inputType = this.addInfo.inputType
      this.editdata.introduction = this.addInfo.introduction
      this.editdata.level = this.addInfo.level
      this.editdata.originPlace[0]= this.addInfo.originPlace[0]
      this.editdata.originPlace[1]= this.addInfo.originPlace[1]
      this.editdata.originPlace[2]= this.addInfo.originPlace[2]
      this.editdata.specification = this.addInfo.specification
      this.editdata.supplierId = this.addInfo.supplierId
      this.editdata.tagStatus = this.addInfo.tagStatus
      this.editdata.type = this.addInfo.type
      this.editdata.unit = this.addInfo.unit
      this.editdata.variety = this.addInfo.variety
      this.editdata.qrCode = this.addInfo.qrCode
      this.editdata.video.id = this.addInfo.video.id
      this.editdata.video.name = this.addInfo.video.name
      this.editdata.video.url = this.addInfo.video.url
    }
  },
  props:{
    //是否打开表单
    dialogVisible:{
      Boolean,
      default:false
    },
    //所属品种
    varietyList:{
      Array
    },
    //产品类型
    productType:{
      Array
    },
    //表头
    dialogTitle:{
      String
    },
    //信息
    addInfo:{
      Object
    },
    message:{
      String
    },
    unitList:{
      Array
    },
    inputList:{
      Array
    },
    levelList:{
      Array
    },
    tagStatusList:{
      Array
    }
  },
  data(){
    return{
      editdata:{
        authentication:"{}",
        bestBeforeDate:0,
        brand:"",
        name:"",
        price:"",
        purchaseChannel:{
          id:0,
          name:'',
          platform:'',
          url:''
        },
        sku:"",
        count:0,
        expirationDate:"",
        factoryId:0,
        images:"",
        inputType:"",
        introduction:"",
        level:0,
        originPlace:[],
        specification:"",
        supplierId:0,
        tagStatus:0,
        type:"",
        unit:"",
        variety:"",
        qrCode:"",
        video:{
          id:0,
          name:'',
          url:''
        }
      },
      select:'',
      fileList: [],
    }
  },
  computed:{
    
  },
  methods:{ 
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    // 关闭弹窗
    tableClose() {
      this.$confirm('确认关闭？').then(() => {
          this.closeform();
        }).catch(() => {});
    },
    //选择所属品种
    changeEvent(index) {
      console.log(index);
      this.editdata.variety = this.varietyList[index].type;
    },
    changeEvent1(index) {
      console.log(index);
      this.editdata.type = this.productType[index].name;
    },
    changeEvent2(index) {
      console.log(index);
      this.editdata.inputType = this.inputList[index].type;
    },
    changeEvent3(index) {
      console.log(index);
      this.editdata.level = this.levelList[index].type;
    },
    changeEvent4(index) {
      console.log(index);
      this.editdata.tagStatus = this.tagStatusList[index].type;
    },
    changeEvent5(index) {
      console.log(index);
      this.editdata.unit = this.unitList[index].type;
    },
    //修改原辅料库存信息
    editMInfo(){
      console.log("laila",this.editdata)
      this.$emit("editMaterInfo",this.editdata)
    },
    
    changePictureSuccess1(res) {
        let pic = JSON.parse(res.data);
        this.addInfo.authentication = pic.url;
      },
    changePictureSuccess(res) {
        let pic = JSON.parse(res.data);
        this.addInfo.images = pic.url;
      },
    // 关闭编辑表单弹窗
    closeform() {
      this.$emit("closeDialog");
    },
  }
}
</script>

<style scoped>
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__append {
    background-color: #fff;
  }
</style>